<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
</head>
<body>
    <div id="box">
        <p>我是段落</p>
        <h1>我是标题</h1>
    </div>
</body>
<script>
    /*
        事件委托:原理是利用事件冒泡
            * 事件是绑定在父节点的，委托父节点帮执行
            * 事件只需要绑定一次即可
    */

   var box = document.getElementById('box');

    box.onclick = function (ev) {
        //事件源对象 ev;ev.target:当前被点击的那个对象(和this很像)
        console.log(ev.target.tagName);//H1
        if(ev.target.tagName == 'H1') {
            //点击了h1标签
            console.log('标题')
        }

        if(ev.target.tagName == 'P') {
            //点击了h1标签
            console.log('段落')
        }
    }
</script>
</html>